<template>
  <div class="school-card">
    <div class="school-img">
      <img :src="props.detail.icon" alt="" />
    </div>
    <div class="school-info">
      <div class="left-info" @click="jumpToDetail(props.detail)">
        <div class="school-name">{{ props.detail.name }}</div>
        <div class="tags">
          {{ props.detail.levelName }} / {{ props.detail.collegeType }} /
          {{ props.detail.natureName }}
        </div>
        <div class="dual-container" v-if="props.detail.dualClassName">
          <div
            class="dual-item"
            v-for="(item, index) in props.detail.dualClassName
              ?.split(',')
              .slice(0, 3)"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="right-info">
        <div>
          学校位置：{{ props.detail.provinceName }} <span>·</span>
          {{ props.detail.cityName }}
        </div>
        <div style="word-break: break-all">
          学校官网：{{ props.detail.detail?.schoolSite }}
        </div>
        <div>招生官网：{{ props.detail.detail?.site }}</div>
        <div>招生电话：{{ props.detail.detail?.phone?.split(',')[0] }}</div>
      </div>
      <img
        class="star-icon"
        :src="props.detail.isCollect == 1 ? starFill : blueStarPlus"
        alt=""
        @click="handleStar"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { campusCollect } from '@/api/collegeSearch';
import starFill from '@/assets/images/starFill.png';
import blueStarPlus from '@/assets/images/blueStarPlus.png';

const router = useRouter();
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});

const handleStar = async () => {
  const params = {
    dataId: props.detail.collegeId,
    dataType: 13,
    action: props.detail.isCollect == 1 ? 0 : 1, // 1新增收藏  0取消收藏
  };
  const res = await campusCollect(params);
  if (res.code == 200) {
    showToast(params.action == 1 ? '收藏成功！' : '已取消收藏');
    props.detail.isCollect = params.action == 1 ? true : false;
  }
};

const jumpToDetail = (detail) => {
  router.push({
    name: 'SchoolDetail',
    query: {
      dataId: detail.collegeId,
      dataName: detail.name,
    },
  });
};
</script>

<style lang="scss" scoped>
.school-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 28px 25px 32px;
  display: flex;
  align-items: center;
  gap: 21px;
  .school-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .school-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-info {
      flex-shrink: 0;
      width: 38%;
      box-sizing: border-box;
      padding: 8px 0px 13px 0px;
      .school-name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30px;
        color: #000000;
        margin-bottom: 14px;
      }
      .tags {
        font-size: 22px;
        color: #666666;
        margin-bottom: 16px;
      }
      .dual-container {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        .dual-item {
          font-size: 22px;
          height: 30px;
          background: #f0f0f0;
          border-radius: 6px;
          padding: 2px 15px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .right-info {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22px;
      color: #666666;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
    }
    .star-icon {
      padding: 12px 0 12px 12px;
      width: 36px;
      height: 36px;
    }
  }
}
</style>
